import {messages} from "share/common";
import React from 'react'
import {Input, Radio} from 'antd'
import TreeSelector from 'components/tree-selector'
import 'styles/components/template/expense-type-selector.scss'
import taxCodeServer from 'containers/finance-setting/tax-code/tax-code-server';
const RadioGroup = Radio.Group;
const Search = Input.Search;

class TaxCodeTreeSelector extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      treeData: [],
      selectNodeData: [],
      selectValue: [],
      searchParam: '',
      cacheTree: true,//缓存树
      selectMode: 1,//选择模式1.包含下级；2.仅自己
    };
  }

  componentWillMount() {
    this.queryTaxCodeList();
  }

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this)
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.showTaxCodeModal) {
      this.setState({cacheTree: true});
      this.queryTaxCodeList();
    }
  }

  queryTaxCodeList = (searchParam) => {
    taxCodeServer.queryTaxCodeList(searchParam).then(res => {
      this.setState({
        treeData: res.data,
        searchParam
      })
    })
  };

  onChangeSelectMode = (e) => {
    this.setState({
      selectMode: e.target.value
    })
  };

  getSelectValue = (value) => {
    this.setState({
      selectValue: value,
     /* selectNodeData: value*/
    })
  };

  //重置选中的树
  restSelectValue() {
    this.setState({
      selectValue: [],
      selectNodeData: [],
      selectMode: 1,
      cacheTree: false
    })
  };

  handleChange = e => {
    this.setState({
      searchParam: e.target.value
    })
  };

  render() {
    const {showTaxCodeModal} = this.props;
    const {treeData, selectMode, selectNodeData, searchParam, cacheTree,} = this.state;
    return (
      <div>
        <Search
          placeholder={messages('finance-setting.key138'/*税务编码/货物和劳务名称*/)}
          enterButton={true}
          value={searchParam}
          onChange={e => this.handleChange(e)}
          onSearch={(value) => this.queryTaxCodeList(value)}
          style={{width: 300, marginBottom: 20}}/>
        {/*非模糊查询显示选择模式*/}
        {!searchParam && <RadioGroup style={{marginBottom: 20}} onChange={this.onChangeSelectMode} value={selectMode}>
          <Radio value={1}>{messages('finance-setting.key139'/*选择包含所有下级*/)}</Radio>
          <Radio value={2}>{messages('finance-setting.key140'/*选择仅自己*/)}</Radio>
        </RadioGroup>}
        {(cacheTree || showTaxCodeModal) && <TreeSelector
          treeData={treeData}
          selectNodeData={selectNodeData}
          treeNodeIdAlias={"id"}
          childrenTreeAlias={"childrenArray"}
          parentIdAlias={"parentId"}
          isListTransTreeData={searchParam ? false : true}
          isCheckStrictly={selectMode !== 1}
          callBackSelectValue={this.getSelectValue}
          treeNodeNameAlias={"goodsServiceName"}/>}
      </div>
    )
  }
}

TaxCodeTreeSelector.propTypes = {};

TaxCodeTreeSelector.defaultProps = {};

export default TaxCodeTreeSelector;
